<script lang="ts" setup>
import { Picture as IconPicture } from '@element-plus/icons-vue'
import { getOrganList } from '~/api/home'

const organList = ref([])
const showType = ref<1 | 2 | 3 | 4>(2)
const routePath = [{ name: '首页', path: '/' }, { name: '机构信息', path: '/peopleHealth/organ' }]
const route = useRoute()
const activeName = ref()
getOrganList().then((res) => {
  organList.value = res.data || []
  console.log(organList.value)
}).catch((err) => {
  console.log(err)
})
</script>

<template>
  <div class="h-full w-full py-5%">
    <ClientOnly>
      <CommonPageContainer title="组织机构" :path="routePath">
        <div class="h-screen min-h-600px flex justify-center">
          <div class="mr-4 w-1/5 border-#e0cfb1 rounded-lg bg-#f7f6ea p-5 text-center">
            <span class="block py-8 text-3xl">机构信息</span>
            <button
              class="w-4/5 border-b-2px p-5 text-center" :class="{ 'bg-#dcd0bf': showType === 1 }"
              @click="showType = 1"
            >
              关于我们
            </button>
            <button
              class="w-4/5 border-b-2px p-5 text-center" :class="{ 'bg-#dcd0bf': showType === 2 }"
              @click="showType = 2"
            >
              机构架构
            </button>
            <!-- <button class=" text-center p-5 border-b-2px w-4/5" :class="{ 'bg-#dcd0bf': showType === 3 }"
                            @click="showType = 3">来稿收集</button> -->
            <button
              class="w-4/5 border-b-2px p-5 text-center" :class="{ 'bg-#dcd0bf': showType === 4 }"
              @click="showType = 4"
            >
              联系我们
            </button>
          </div>
          <div class="w-3/5 bg-#f7f6ea p-5">
            <div v-if="showType === 1">
              <div class="flex items-center border-b-2px border-#AC8358 p-4">
                <span class="text-2xl">关于我们</span>
              </div>
              <span class="mr-1/3"> 发布日期：2024-07-10 </span><span>信息来源：西安市地方志办公室</span>
              <p>西安市地方志办公室是负责地方志行政管理和编纂工作的市政府直属事业单位，也是西安市地方志编纂委员会的办事机构。</p>

              <p>
                (一)按照国家和省、市政府关于地方志编纂、续修工作的方针，负责拟定全市地方志工作发展规划，制订西安市地方志编纂、续修工作方案，承担《西安市志》的编纂、续修任务，指导市级各部门的修志工作。
              </p>

              <p>(二)规划、审查、批准市辖各区、县和乡镇志的编纂、续修方案，督促指导并检查落实市辖各区、县志书和年鉴的编纂工作。</p>

              <p>(三)研究地方志编纂、续修工作中的重大问题，并按政策规定解决有关原则问题。</p>

              <p>(四)负责区、县地方志稿的复审和乡镇及部门专业志稿的终审，指导并批准区、县、乡镇和部门专业志的出版工作。</p>

              <p>(五)整理、校注、出版旧志。</p>

              <p>(六)培训修志队伍，开展地方志学术活动。</p>

              <p>(七)编纂、出版、发行《西安年鉴》。</p>

              <p>(八)收集、保管、研究各类地方史、志的成果，向各级党政机关和社会各界提供地情资料和信息方面的服务。</p>

              <p>(九)开发、管理《西安市志》、《西安年鉴》等地情资料丛书及其出版物。</p>

              <p>(十)完成市委、市政府交办的其它工作。</p>
            </div>
            <div v-if="showType === 2" class="h-90%">
              <div class="flex items-center border-b-2px border-#AC8358 p-4">
                <!-- <el-image src="" fit="cover" class="h-40px w-40px">
                                    <template #error>
                                        <div class="image-slot">
                                            <el-icon><icon-picture /></el-icon>
                                        </div>
                                    </template>
                                </el-image> -->
                <span class="text-2xl">机构设置</span>
              </div>

              <el-collapse v-model="activeName" class="oragin max-h-100% overflow-auto">
                <!-- <el-scrollbar height="98%"> -->
                <el-collapse-item
                  v-for=" item, index in organList" :name="index"
                  :title="item.organ_name" class="bg-#f7f6ea"
                >
                  <div>
                    <span class="my-2 mr-1/3">所在地：{{ item.area_name ?? '暂无'
                    }}</span><span>电话：{{
                      item.phone ?? '暂无' }}</span>
                  </div>
                  <span>机构简介：<br>{{ item.introduction ?? '暂无' }}</span>
                </el-collapse-item>
                <!-- </el-scrollbar> -->
              </el-collapse>
            </div>
            <div v-if="showType === 4">
              <div class="flex items-center border-b-2px border-#AC8358 p-4">
                <span class="text-2xl">联系我们</span>
              </div>
              <span class="mr-1/3"> 发布日期：2024-07-10 </span><span>信息来源：西安市地方志办公室</span>
              <p>1、24小时值班电话：029-86788710</p>

              <p>2、业务处室咨询电话及服务时间：</p>

              <p>市志处：029-86788726</p>

              <p>区县志处：029-86788739</p>

              <p>地情资料处：029-86788731</p>

              <p>年鉴处：029-86788735</p>

              <p>服务时间为正常办公时间</p>

              <p>即周一至周五 上午9:00---12:00，下午14:00----18:00</p>

              <p>（7、8月份下午15:00---18:00），国家法定节假日除外。</p>

              <p>3、网站运维办公电话</p>

              <p>信息中心：029-86788730</p>
            </div>
          </div>
        </div>
      </CommonPageContainer>
    </ClientOnly>
  </div>
</template>

<style scoped lang="scss">
.image-slot {
  height: 40px;
}

.oragin {
  &:deep(.el-collapse-item__header) {
    background-color: #f7f6ea;
  }

  &:deep(.el-collapse-item__content) {
    background-color: #f7f6ea;
  }
}
</style>
